<script setup>
import { Search } from '@element-plus/icons-vue'
import ListContainer from "@/components/AdminConponents/ListContainer.vue";
import {ref, computed} from "vue";
import {adminListAPI, adminStateChangeAPI} from "@/api/AdminApi/admin.js";
import {useRouter} from "vue-router";
import 'element-plus/theme-chalk/el-message.css'
import 'element-plus/theme-chalk/el-message-box.css'
import {ElMessage, ElMessageBox} from "element-plus";

const AdminList = ref([]) // 管理员列表
const total = ref(0) // 总条数
const loading = ref(false)

// 定义请求参数对象
const params = ref({
  page: 1, // 当前页
  pageSize: 20, // 当前生效的每页条数
  usernameOrName: null,
  state: null
})

// 基于params参数，获取管理员列表
const getAdminList = async () => {
  loading.value = true

  const res = await adminListAPI(params.value)
  AdminList.value = res.data.records
  total.value = res.data.total

  loading.value = false
}
getAdminList()

// 处理分页逻辑
const onSizeChange = (size) => {
  // console.log('当前每页条数', size)
  // 只要是每页条数变化了，那么原本正在访问的当前页意义不大了，数据大概率已经不在原来的那一页
  // 重新从第一页渲染即可
  params.value.page = 1
  params.value.pageSize = size
  // 基于最新的当前页和每页条数，渲染数据
  getAdminList()
}


const onCurrentChange = (page) => {
  params.value.page = page
  // 基于最新的当前页，渲染数据
  getAdminList()
}

// 选择框改变
const stateChange = () => {
  getAdminList()
}

// 搜索
const search = () => {
  getAdminList()
}

// 计算页数
const totalPages = computed(() => {
  return Math.ceil(total.value / params.value.pageSize)
})

// 上一页
const goToPreviousPage = () => {
  if (params.value.page > 1) {
    params.value.page -= 1;
  }
  getAdminList()
}

// 下一页
const goToNextPage = () => {
  if (params.value.page < totalPages.value) {
    params.value.page += 1;
  }
  getAdminList()
}

// 管理员详细
const router = useRouter()
const adminDetail = (id) => {
  router.push(`/admin/admin/detail/${id}`)
}

// 管理员编辑
const adminEdit = (id) => {
  router.push(`/admin/admin/edit/${id}`)
}

// 更新管理员状态
const changeState = async (id, username) => {
  await ElMessageBox.confirm(`你确认禁用${username}吗`, '温馨提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
  const res = await adminStateChangeAPI(id)
  if (res.code === 1) {
    ElMessage.success("修改状态成功")
    getAdminList()
  } else {
    ElMessage.error(res.msg)
  }
}

// 添加管理员
const addAdmin = () => {
  router.push('/admin/admin/add')
}
</script>

<template>
  <ListContainer class="listContainer">
    <template #headerLeft>
      <el-input
          v-model="params.usernameOrName"
          placeholder="请输入姓名或者用户名"
          class="input-with-select">
        <template #append>
          <el-button @click="search" :icon="Search" />
        </template>
      </el-input>
      <el-select v-model="params.state" placeholder="状态" @change="stateChange">
        <el-option label="全部" :value="''" />
        <el-option label="正常" :value="false" />
        <el-option label="禁用" :value="true" />
      </el-select>
    </template>
    <template #headerRight>
      <el-button type="primary" @click="addAdmin" style="width: 110px;">
        <i class="iconfont icon-tianjia"></i>
        添加管理员
      </el-button>
    </template>
    <template #body>
      <el-table
          :data="AdminList"
          v-loading="loading">
        <el-table-column prop="name" label="管理员姓名" />
        <el-table-column prop="username" label="用户名">
          <template #default="{ row }">
            <el-link @click="adminDetail(row.id)" type="primary" :underline="false">{{ row.username }}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="phone" label="手机号" />
        <el-table-column prop="state" label="状态">
          <template #default="{ row }">
            {{row.state === false ? '正常' : '锁定'}}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="200px">
          <template #default="{ row }">
            <el-button type="success" @click="adminDetail(row.id)" size="small">详细</el-button>
            <el-button type="success" @click="adminEdit(row.id)" size="small">编辑</el-button>
            <el-button
                v-if="row.state === false"
                type="danger"
                @click="changeState(row.id, row.username)"
                size="small">
              禁用
            </el-button>
            <el-button
                v-else
                type="success"
                @click="changeState(row.id, row.username)"
                size="small">
              启用
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <template #footerLeft>
      <el-button
          type="info"
          :disabled="params.page === 1"
          @click="goToPreviousPage">
        上一页
      </el-button>
      <el-button
          type="info"
          :disabled="params.page === totalPages"
          @click="goToNextPage">
        下一页
      </el-button>
    </template>
    <template #footerRight>
      <el-pagination
          v-model:current-page="params.page"
          v-model:page-size="params.pageSize"
          :page-sizes="[5, 10, 20, 40]"
          layout="total, sizes, pager, jumper"
          :total="total"
          @size-change="onSizeChange"
          @current-change="onCurrentChange"
      />
    </template>
  </ListContainer>
</template>

<style scoped>

</style>
